<html>

<head>
  <title>Web Components Blog's Page</title>
  <script src="main.js" defer></script>
  <style>
    :root{
      --h1-color:red;
    }
    /* my-paragraph::part( part-name) {
      background-color: red;
    }
    #my2::part(part-name)  {
      font-size: 40px;
    }
    my-paragraph::part(part-name)  span {
      font-size: 30px;
      color:blue;
    } */
  </style>
</head>

<body>
  <h1>主页面标题</h1>
  <template id="para_tmpl">
    <!-- 组件内样式 -->
    <style>
      p {
        color: #fff;
        background-color: #666;
        padding: 5px;
        margin: 5px;
      }
      h1{
        color:var(--h1-color,blue)
      }
    </style>
    <!-- 组件模板,添加2个slot -->
    <h1 part="part-name" >组件title <span>span in h1</span></h1>
    <p>
      <slot><span>My default slot 占位 </span> </slot>
    </p>
    <p>
      <slot name="my-text"><span>My Text slot 占位 </span> </slot>
    </p>
    <hr />
  </template>

  <button id="btn">动态改变子元素</button>
  <my-paragraph id="my1"></my-paragraph>
  <my-paragraph id="my2">
    <span>替换默认占位符</span>
    <span slot="my-text" id="remove">替换具名占位符</span>
  </my-paragraph>
  <span slot="my-text" id="insert1">动态插入到第一个的具名占位符</span>
  <span slot="my-text" id="insert2">动态插入到第二个的具名占位符</span>
  <script>
    // 此处变量通过id直接引用
    btn.addEventListener("click", () => {
      my1.append(insert1);
      my2.removeChild(remove);
      setTimeout(() => {
        my2.append(insert2);
      }, 1000)
    });
  </script>
</body>

</html>